<template>
  <div class="mem">
    <search-input
      :searchRoute="searchRoute"
      :selectId="selectId"
      @feedData="feedData"
      :selfId="userData.userUid"
      @readySelect="readySelect"/>
    <div class="space"></div>
    <loading :state="state"></loading>
    <div class="main">
      <!--这是放搜索的结果的东东-->
      <div v-if="memData.uid">
        <div class="user-cell">
          <div class="avatar">
            <img :src="userData.avatar"/>
          </div>
          <div class="info">
            <span class="userName" v-text="userData.userName"></span>
            <br/>
            <span class="rebate">
              全部返利：<span class="money" v-text="getBalance"></span>元
            </span>
            <span class="userLevel" v-text="userData.userLevel">{{userData.userLevel}}</span>
          </div>
        </div>
        <div style="margin-top: -80px"></div>
        <member-list-item :item="memData" @click.native="memOrder"/>
      </div>
      <!--这是放正常列表的东东-->
      <div class="list_main" v-show="listState">
        <div class="user-cell">
          <div class="avatar">
            <img :src="userData.avatar"/>
          </div>
          <div class="info">
            <span class="userName" v-text="userData.userName"></span>
            <br/>
            <span class="rebate">
              全部返利：<span class="money" v-text="getBalance"></span>元
            </span>
            <span class="userLevel" v-text="userData.userLevel">{{userData.userLevel}}</span>
          </div>
        </div>
        <div class="space"></div>
        <div class="cell-top">
          <member-list-item-new :UP="memList['up']" :DOWN="memList['down']" v-if="flags === 2" @toSelect="selectId"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import memberListItem from '@/components/user/MemberlistItem.vue';
  import SearchInput from '@/components/user/SearchInput.vue';
  import MemberListItemNew from '@/components/user/MemberListItemNew.vue';
  // 底部加载完成
  import ListNoMore from '@/components/common/ListNoMore';

  export default {
    name: `searchmem`,
    components: {
      memberListItem,
      SearchInput,
      MemberListItemNew,
      ListNoMore
    },
    data() {
      return {
        userData: {
          userUid: this.$store.state.login.userUid,
          userName: this.$store.state.login.userName,
          UserRecommendUid: this.$store.state.login.userRec,
          avatar: this.$store.state.login.userPic,
          userBalance: '获取中',
          userLevel: this.$store.state.login.userLevel
        },
        memList: [], // 成员列表主体数据
        flags: 0,
        listState: true, // 控制显示成员列表还是显示查询结果的变量
        stateLoad: false,
        searchRoute: '/consumer/api/query/member',
        memData: {}, // 查询到的数据
        state: true,
        page: 0 // 页数
      };
    },
    created() {
      this.$UserReq.getUserBalance()
        .then((res) => {
          console.log('getUserBalance地方烦烦烦', res);
          this.userData.userBalance = res.data.total;
        });
      this.$UserReq.getUserBase()
        .then((res) => {
          console.log('12-2getUserBase', res);
          // let x = res.menu;
          this.userData.userLevel = res.data.rank.levelCh;
        });
      this.$UserReq.getTeamUp({
        page: this.page
      }).then(res => {
        console.log('getTeamUpgetTeamUp,', res);
        this.memList['up'] = res.data;
        this.flags += 1; // 加flags 是为了防止数据传递不同步
        console.log('getTeamUpgetthis.memList[\'up\'],', this.memList['up'], this.flags);
        this.loading = false;
        // 去掉初始遮罩
        this.state = false;
      }, () => {
        this.state = false;
      });
      this.$UserReq.getTeamDown({
        page: this.page
      }).then(res => {
        console.log('getTeamDowngetTeamDown,', res);
        this.memList['down'] = res.data;
        this.flags += 1; // 加flags 是为了防止数据传递不同步
        console.log('getTeamDowngthis.memList[\'down\'],', this.memList['down'], this.flags);
        this.loading = false;
        // this.page++;
        // 去掉初始遮罩
        this.state = false;
      }, () => {
        this.state = false;
      });
    },
    computed: {
      getBalance() {
        return this.userData.userBalance;
      }
    },
    methods: {
      selectId(id) {
        this.$store.commit('teamId', parseInt(id));
        // console.log(id, 'selectId');
        // return id;
      },
      feedData(res) {
        // console.log(res, '这次是实打实的res');
        if (res !== '') {
          this.listState = false;
          // 组装数据
          this.memData = res.data;
          // console.log(this.memData, '这次是实打实的');
        } else {
          this.memData.status = '';
          this.listState = true;
        }
      },
      readySelect(state) {
//        this.listState = false;
        alert('该用户非您下级，或暂无上级，您不能查询!');
        this.stateLoad = state;
      },
      loadMoreOut() {
        // 点击头部按钮根据条件查询的方法
        this.memList = []; // 主数据清空
        this.LoadData = true;// 防止不能发送请求
        this.LastData = false;// 更好的显示，把没有更多隐藏
        this.page = 0; // 每次筛选把页码还原
        this.loadMore();
      },
      memOrder() {
        // alert('memOrder');
        this.$router.push({
          name: 'memberOrder',
          query: {
            res: JSON.stringify(this.memData)
          }
        });
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl"
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .main {
    box-sizing border-box;
  }
  // 正常列表样式
  .main {
    box-sizing border-box;
  }
  .user-cell
    margin-left vw(15)
    margin-top vw(60)
    width vw(345)
    height vw(90)
    border-radius vw(5)
    background-color white
  .avatar
    float left
    margin-left vw(20)
    margin-top vw(20)
    width vw(50)
    height vw(50)
    img {
      box-sizing border-box
      width vw(50)
      height vw(50)
      padding 3px
      border-radius(9vw)
    }
  /*margin-top vw(19)*/
  .info
    float left
    height vw(50)
    margin-left vw(20)
    margin-top vw(20)
  .userName
    word-vw(14, first-ash)
    line-height vw(19)
    height vw(19)
    text-align left

  .rebate
    word-vw(14, second-ash)
    line-height vw(30)
    height vw(22)

  .money
    word-vw(14, main-color)

  .userLevel
    word-vw(14, main-color)
    margin-left vw(47)
  .cell-top
    margin-top vw(10)

</style>
